
import { Meta } from "@storybook/addon-docs";
import icons from './provider-icons.json';

<style>{`
.sb-icons {
  // display: flex;
}

.reverse-filter {
}

.reverse-filter .sb-icon {
  background: #000;
  color: #fff;
}

.reverse-filter .sb-icon img {
  filter: invert(100%);
}

.sb-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #777;
  margin: 5px;
  border-radius: 5px;
  width: 220px;
  height: 120px;
}

.sb-icon > img {
  margin: 10px;
  width: 64px;
  height: 64px;
}
`}</style>

<Meta title="Foundation/Provider Images" />

# Provider Images

Images for various providers are included in the `assets/images/providers` folder.

<h2>Full Color Logos</h2>

<div className="sb-icons">
{icons.map((icon, index) => (
  <div className="sb-icon" key={index}>
    <div>{icon}</div>
    <img src={function(i) { return `./images/providers/${i}.svg`; }(icon)} />
  </div>
))}
</div>

<h2>Single Color Logos</h2>

<div className="sb-icons">
{icons.map((icon, index) => (
  <div className="sb-icon" key={index}>
    <div>{icon}</div>
    <img src={function(i) { return `./images/providers/${i}-black.svg`; }(icon)} />
  </div>
))}
</div>

<h2>Inverted with CSS - Single Color Logos</h2>


<div className="sb-icons reverse-filter ">
{icons.map((icon, index) => (
  <div className="sb-icon" key={index}>
    <div>{icon}</div>
    <img src={function(i) { return `./images/providers/${i}-black.svg`; }(icon)} />
  </div>
))}
</div>
